import { ShElement } from './ShElement'

export class ShButton extends ShElement {

    constructor() {
        super()

        this.$shadow.innerHTML = `
            <style>
                :host {
                    border: var(--border-btn);
                    border-radius: 4px;
                    outline: none;
                    padding: 0.5em 2em calc(0.5em + 1px) 2em;
                    display: flex;
                    justify-content: center;
                    line-height: 1em;
                    background-color: white;
                    user-select: none;
                    cursor: pointer;
                }
                :host(:not(.sh-disabled):hover) {
                    border-color: var(--color-primary);
                }
                :host(:not(.sh-disabled):active) {
                    background-color: var(--color-primary-lite);
                }
                :host([primary]:not(.sh-disabled)) {
                    background-color: var(--color-primary);
                    border-color: var(--color-primary);
                    color: white;
                }
                :host([primary]:not(.sh-disabled):hover) {
                    background-color: var(--color-primary-hover);
                }
                :host([primary]:not(.sh-disabled):active) {
                    background-color: var(--color-primary-dark);
                    border-color: var(--color-primary-dark);
                }
                :host([small]) {
                    padding: calc(0.3em + 1px) 1em calc(0.3em + 2px) 1em;
                }
            </style>
            <slot></slot>
        `
    } 
}
customElements.define('sh-button', ShButton)